<template>

  <p style="color: #333;font-size: 28px;margin:25px 20px;">航空公司特惠专区</p>
  <div class="companyplane" v-loading="flag">
    <div class="company">
      <div @click="companyMsg(item.id,item)" class="companyMsg" :class="{clickStyle:index==isActive}"
        v-for="item,index in planegs.gs" :key="index">
        <div style="width: 100px;height: 100px;text-align: center;line-height: 1.5;margin-top: 10px;">
          <img :src="item.logos" alt="">
          <p>
            {{item.name}}
          </p>
        </div>
      </div>
    </div>
    <div class="imgAndmsg">
      <div class="aimg">
        <img :src="gsMsg.msg.images" alt="" style="width: 480px;height: 145px;">
      </div>
      <div class="amsg">
        <p v-html="gsMsg.msg.msg"></p>
      </div>
      <div @mouseover="showDetailed" @mouseout="hideDeteiled"
        style="position: absolute;right: 755px;margin: 10px 0;color: #5678a8;cursor: pointer;"
        v-if="gsMsg.msg.msg!=null">
        查看更多
      </div>
      <div class="detailed" v-show="getdetailed">
        <div style="width:90%;margin:0 40px;">
          <p v-html="gsMsg.msg.msg" style="margin: 40px 0;"></p>
        </div>
      </div>
    </div>
    <div class="plane animate__animated animate__fadeIn">

      <div class="city">
        <span style="font-size:22px;color:#999;">出发地：</span>
        <ul v-for="(item,index) in gsMsg.msg.hotCityVoList" :key="index">
          <li @click="getTicket(item.upCity,index,gsMsg.msg.id)" :class="{listyle:index==listyle}">{{item.upCity}}</li>
        </ul>
      </div>
      <div class="ticket">
        <div class="oneticket" v-for="(item,index) in planeTicket.ticket" :key="index" @click="lookticket(item)">
          <div style="margin:16px;font-weight: 600;font-size:18px;">
            <span>{{item.upCity}}</span>
            <img src="../../../assets/小右箭头.png" alt="" style="width:50px;height: 50px;margin: -18px 10px;">
            <span>{{item.downCity}}</span>

          </div>
          <div style="margin-top: -10px;margin-left: 15px;color: #999;font-size: 14px;position: relative;width: 48%;">
            <p style="width: 160px;display: flex;justify-content: space-between;">
              <span>{{item.ticket.startDate}}</span>
              <span>{{item.ticket.fname}}</span>
            </p>
          </div>

          <div class="price">
            <div style="position: absolute;right: 10px;top:13px;">
              <span style="color: #f70;font-size: 18px;">￥</span>
              <span style="color: #f70;font-size: 20px;font-weight: 600;">{{item.ticket.discountPrice}}</span>
              <!-- <span style="color: #f70;">起</span> -->
            </div>
            <p style="position: absolute;right: 13px;top: 43px;color: #999;">{{ parseInt(item.ticket.discountClass*10)/10 }}折</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref,getCurrentInstance, reactive ,onMounted,provide} from 'vue'
import { useRouter, useRoute } from "vue-router";
import url from "../../../common/js/APIUtil"
// import { useStore } from "../../store/store";

const { proxy } = getCurrentInstance();
const router = useRouter();
const route = useRoute();
const routing_status = ref(router.currentRoute.value.fullPath)
let isActive=ref(0)
onMounted(()=>{
  companyMsg(1)
  getTicket("上海",0,1)
})
let getdetailed=ref(false)
let showDetailed=function(){
  getdetailed.value=true
}
let hideDeteiled=function(){
  getdetailed.value=false

}
let gsMsg=reactive({
  msg:{}
})
let flag=ref(true)

let companyMsg=function(value,city){
  isActive.value=value-1
  proxy.$http({
    method:"get",
    url:url.API_GET_Airlines+value
  }).then(res=>{
    gsMsg.msg=res.data
    flag.value=false
    getTicket(gsMsg.msg.hotCityVoList[0].upCity,0,value)
  })
}
let planegs=reactive({
    gs:{}
})

proxy.$http({
  method:"get",
  url:url.API_GET_Airlines
}).then(res=>{
  planegs.gs=res.data

})


// 点击获取城市机票
let listyle=ref(0)
let planeTicket=reactive({
  ticket:[]
})
let getTicket=function(value,index,cityid)
{
  listyle.value=index
  proxy.$http({
    method:"get",
    url:url.API_GET_GetTicketByCity+cityid+"/"+value
  }).then(res=>{
    planeTicket.ticket=res.data
  })
}

// const store = useStore();
let lookticket=function(value){
  sessionStorage.setItem("company",value.company)
  // let url=`http://localhost:3000/index/ticketinformation?upCity=${value.upCity}&downCity=${value.downCity}&upDate=${value.ticket.startDate}`
  let urls=`${url.API}/#/index/ticketinformation/oneway?upCity=${value.upCity}&downCity=${value.downCity}&upDate=${value.ticket.startDate}`
  window.location.href=urls
}
</script>

<style lang="less" scoped>
.companyplane {
  width: 100%;
  height: 600px;
  // background-color: blue;
  position: relative;
  box-shadow: 0 60px 22px 1px rgb(0 0 0 / 34%);
  border-radius: 20px;
  // z-index: -2;
}
.company{
  width: 100%;
  height: 50%;
  background-color: #fff;
  border-radius: 20px 20px 0 0;
  // position: relative;
  display: flex;
  justify-content: space-evenly;
}
.companyMsg{
  width: 100px;
  height: 100px;
  // background-color: red;
  // position: absolute;
  margin-top: 40px;
  cursor: pointer;
  border: 1px solid rgb(192, 186, 186);
  border-radius:20px ;
  z-index: 999;
}
.clickStyle{
  border: 1px solid #409EFF;
  background-color: rgba(199, 255, 255, 0.2);
}

.companyMsg:hover{
  border: 1px solid #409EFF;
  // background-color: rgba(199, 255, 255, 0.2);
}
.plane{
  width: 100%;
  height: 50%;
  background-color:#f6f8fa;
  border-radius: 0 0 20px 20px;
  margin: 60px 0;
  
}

.imgAndmsg{
  width: 100%;
  height: 150px;
  // background-color: rebeccapurple;
  position: absolute;
  top: 150px;
  margin: 20px 0;
  
}
.aimg{
  width: 480px;
  height: 145px;
}
.amsg{
    position: absolute;
    top: 0;
    width: 800px;
    height: 150px;
    overflow: hidden;
    left: 530px;
    color: #666;
    font-size: 16px;
    word-break: break-all;
    text-indent:2em
}

.detailed{
    width: 830px;
    // height: 178px;
    color: #666;
    border: 1px solid #ddd;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 7px 22px -7px rgb(0 0 0 / 34%);
    position: absolute;
    right: 0;
    top: 190px;
    word-break: break-all;
    text-indent:2em;
    z-index: 1;
}
.city{
  display: flex;
  margin: 0 22px;
  line-height: 4;
}
.city ul{
  margin-top: 3px;
  cursor: pointer;
}
.city ul li{
  float: left;
  list-style: none;
  margin-left: 20px;
  // color: #333;
  font-size: 20px;  
  cursor: pointer;
}
.listyle{
  color: #0086f6;
  font-weight: 700;
}
// .city li:hover{
//   color: #0086f6;
//   font-weight: 700;

// }
.ticket{
  width: 100%;
  height: 70%;
  // background-color: red;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.oneticket{
  width:315px ;
  height: 80px;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  // margin-top: 10px;
}

.oneticket:hover{
  border-color: #409EFF;
}
.price{
  width:45%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0px;
}
.price span{
  margin-right: 3px;
}
</style>
